<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/jsp/taglibs.jsp" %>
<!-- 权限控制 -->
<link type="text/css"  rel="stylesheet"  href="${ctx}/common/css/zTreeStyle/zTreeStyle.css"/>
<script type="text/javascript" src="${ctx}/common/jquery/jquery.ztree.all-3.5.min.js"></script>
<style type="text/css">
  .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
/* 右键菜单 */
   div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
   div#rMenu ul li{
    margin: 1px 0;
    padding: 0 5px;
    cursor: pointer;
    list-style: none outside none;
    background-color: #DFDFDF;
}
    ul.ztree {
    background: none repeat scroll 0 0 #F0F6E4;
    border: 1px solid #617775;
    height: 360px;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: scroll;
    width: 220px;
    padding:5px;
}
    </style>
<SCRIPT type="text/javascript">
var setting = {
    view: {
        addHoverDom: addHoverDom,
        removeHoverDom: removeHoverDom,
    },
    edit: {
        enable: true,
        showRemoveBtn: true,
        showRenameBtn: true
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        beforeRemove: beforeRemove,
        beforeEditName: beforeEditName,
        onRightClick: OnRightClick
    }
};

var zNodes = $.parseJSON('${purviewsList}');

//捕获节点被删除之前的事件回调函数
function beforeRemove(treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.selectNode(treeNode);
    $.dialog.confirm("确认删除 节点 -- " + treeNode.name + " 吗？",function(){
    	$.post("${ctx}/purview/delete",{id:treeNode.id},
    	  function(data){
            if(data.status=='success'){
                showSuccess();
                loadMainHtml("${ctx}/purview/toList?time="+new Date().getTime());
            }else{
                showError();
                loadMainHtml("${ctx}/purview/toList?time="+new Date().getTime());
            }
            
        },"json");
    });
    return false;
}

//捕获节点编辑按钮的 click 事件
function beforeEditName(treeId, treeNode) {
	var treeId = treeNode.id;
    $.dialog.open("${ctx}/purview/toEdit?id="+treeId,{
    	title: '更新菜单项', 
    	width: 350,
    	height: 210,
        close:function(){
        	loadMainHtml("${ctx}/purview/toList?time="+new Date().getTime());
    }});
    return false;
}

//添加一个增加节点的按钮
function addHoverDom(treeId, treeNode) {
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
        + "' title='add node' onfocus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_"+treeNode.tId);
    if (btn) btn.bind("click", function(){
       var pId = treeNode.id;
       $.dialog({
            title: '增加子节点',
            content: $("#addPurviewDiv").html(),
            ok: function () {
            	$("input[name='parentId']").val(pId);
            	$("#purview").ajaxSubmit({
                    url:'${ctx }/purview/add',
                    type:"POST",
                    dataType:'json',
                    success:function(data){
                        if(data.status=='success'){
                        	showSuccess();
                            $.dialog.close();
                        }else{
                        	showError();
                            $.dialog.close();
                        }
                        
                    }           
                }); 
            },
            okVal:'提交',
            cancel: true,
            cancelVal:'取消',
            close:function(){
            	loadMainHtml("${ctx}/purview/toList?time="+new Date().getTime());
            }
        });
        
    });
};

//为插件定义：卸载增加按钮过程
function removeHoverDom(treeId, treeNode){
    $("#addBtn_"+treeNode.tId).unbind().remove();
};

//增加右键菜单：增加根节点
function OnRightClick(event, treeId, treeNode) {
            if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                showRMenu("root", event.clientX, event.clientY);
            }
        }

function showRMenu(type, x, y) {
    $("#rMenu ul").show();
    rMenu.css({"top":(y-130+$(document).scrollTop())+"px", "left":(x-320)+"px", "visibility":"visible"});
    $("body").bind("mousedown", onBodyMouseDown);
}

function onBodyMouseDown(event){
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
        rMenu.css({"visibility" : "hidden"});
    }
}

function hideRMenu() {
    if (rMenu) rMenu.css({"visibility": "hidden"});
    $("body").unbind("mousedown", onBodyMouseDown);
}

//异步增加一个根节点
function addTreeRootNode() {
    hideRMenu();
    $.dialog({
        title: '增加根节点',
        content: $("option[value='2'],option[value='3']").attr("disabled","disabled").parent().parent().parent().parent().html(),
        ok: function () {
            $("input[name='parentId']").val(0);
            $("#purview").ajaxSubmit({
                url:'${ctx }/purview/add',
                type:"POST",
                dataType:'json',
                success:function(data){
                    if(data.status=='success'){
                    	showSuccess();
                        $.dialog.close();
                    }else{
                    	showError();
                        $.dialog.close();
                    }
                    
                }           
            }); 
        },
        okVal:'提交',
        cancel: true,
        cancelVal:'取消',
        close:function(){
            loadMainHtml("${ctx}/purview/toList?time="+new Date().getTime());
        }
    });
}


//页面加载完后加载整棵树
var rMenu;
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    treeObj.expandAll(true);
    rMenu = $("#rMenu");
});
</SCRIPT>
    <div><span style="color:red;">请在以下区域内<b>单击右键 </b>，添加<b>根权限</b></span></div>
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div id="rMenu">
        <ul>
             <li id="m_add" onclick="addTreeRootNode();">增加根节点</li>
        </ul>
    </div>
    <!-- 增加节点 -->
    <div id="addPurviewDiv"  style="display:none;">
      <form id="purview">
       <input type="hidden" name="parentId" value="${pId }">
       <p>
         <label>菜单名称:</label>
         <input type="text" name="name" class="sf"/>
       </p>
       <p>
         <label>访问URL:</label>
         <input type="text" name="url" class="sf"/>
       </p>
       <p>
         <label>级别:</label>
         <select name="level" class="dropdown">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
         </select>
       </p>
       </form>      
     </div>
     <!-- 增加节点结束 -->
     